<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- css 引用-->
    <link rel="stylesheet" type="text/css" th:href="@{~/css/basic.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{~/css/dropzone.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{~/css/bootstrap.min.css}"/>
    <!-- js 引用 -->
    <script th:src="@{~/js/jquery-1.10.1.js}"></script>
    <script th:src="@{~/js/bootstrap.js}"></script>
    <script th:src="@{~/js/dropzone.js}"></script>

</head>
<body>

<input type="text" value="100" id="taskKey"/><span>如果五十分满填50</span>
<div id="dropz" class="dropzone" style="width: 500px; height: 300px;"></div>

<!-- 文件上传缩略图模板 -->
<div id="preview-template" class="hide">
    <div class="dz-preview dz-file-preview">
        <div class="dz-image">
            <img data-dz-thumbnail="" />
        </div>

        <div class="dz-details">
            <div class="dz-size">
                <span data-dz-size=""></span>
            </div>

            <div class="dz-filename">
                <span data-dz-name=""></span>
            </div>
        </div>

        <div class="dz-error-message">
            <span data-dz-errormessage=""></span>
        </div>

        <div class="dz-success-mark">
            <span class="fa-stack fa-lg bigger-150">
                <i class="fa fa-circle fa-stack-2x white"></i>
                <i class="fa fa-check fa-stack-1x fa-inverse green"></i>
            </span>
        </div>

        <div class="dz-error-mark">
            <span class="fa-stack fa-lg bigger-150">
                <i class="fa fa-circle fa-stack-2x white"></i>
                <i class="fa fa-remove fa-stack-1x fa-inverse red"></i>
            </span>
        </div>
    </div>
</div>
<div class="py">
    <a id="dd1" href="#">周成绩下载（需重新刷新页面再上传。）</a>
</div>

<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
    　　
    <div style="width: 200px;height:100px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
        　　　　
        <div class="progress progress-striped active"
             style="margin-bottom: 0;height:50px; text-align:center;line-height: 50px;font-size:large;">
            数据加载中,请稍候......　　　　
        </div>
        　　
    </div>
</div>

<!--<div id="preview-template" style="display: none;">
    <div class="dz-preview dz-file-preview ">
        <div class="dz-image"><img data-dz-thumbnail /></div>
        <div class="dz-details">
            <div class="dz-filename"><span data-dz-name></span></div>
            <div class="dz-size" data-dz-size></div>
        </div>
        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
        <div class="dz-success-mark"><span>✔</span></div>
        <div class="dz-error-mark"><span>✘</span></div>
        <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>
</div>-->

</body>
<script th:inline="javascript">
    // $(document).ready(function(){
    //     hideLoading()
    // })
    //展示loading框
    showLoading = function ()
    {
        $('#loadingModal').modal({backdrop: 'static', keyboard: false});
    }
    //隐藏掉loading框
    hideLoading = function ()
    {
        $('#loadingModal').modal('hide');
    }

    Dropzone.autoDiscover = false;//解决两次实例Dropzone错误，可在控制台看到该错误
    var $taskKey = $("#taskKey");
    try{

        var myDropzone = new Dropzone("#dropz",{
            url: "/uploadFile",//文件提交地址
            method:"post",  //也可用put
            paramName:"file", //默认为file
            maxFiles:7,//一次性上传的文件数量上限
            maxFilesize: 700, //文件大小，单位：MB
            acceptedFiles: ".xls,.xlsx", //上传的类型
            addRemoveLinks:true, //默认false。如果设为true，则会给文件添加一个删除链接
            uploadMultiple:true,//如果设为true，则相当于 HTML 表单添加 multiple 属性
            parallelUploads: 7,//一次上传的文件数量
            autoProcessQueue:true, //当设置 false 你必须自己像这样 myDropzone.processQueue()
            previewTemplate: $('#preview-template').html(),//如果去掉该选项就会使用默认的
            dictDefaultMessage :
                '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> 拖拽文件到此处</span> \
                <span class="smaller-80 grey">(或点击下面的上传按钮选择待上传文件)</span> <br /> \
                <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>'
            ,
            dictMaxFilesExceeded: "您最多只能上传{{maxFiles}}个文件！",
            dictResponseError: '文件上传失败!',
            dictInvalidFileType: "文件类型只能是*.xls,*.xlxs",
            dictFallbackMessage:"浏览器不受支持",
            dictFileTooBig:"文件过大({{filesize}}MB). 上传文件最大支持: {{maxFilesize}}MB.",
            dictRemoveLinks: "删除",
            dictCancelUpload: "取消",
            dictRemoveFile: "移除",
            //文件信息预览
            thumbnail: function(file, dataUrl) {
                if (file.previewElement) {
                    $(file.previewElement).removeClass("dz-file-preview");
                    var images = $(file.previewElement).find("[data-dz-thumbnail]").each(function() {
                        var thumbnailElement = this;
                        thumbnailElement.alt = file.name;
                        thumbnailElement.src = dataUrl;
                    });
                    setTimeout(function() { $(file.previewElement).addClass("dz-image-preview"); }, 1);
                }
            },
            accept: function(file, done) {
                //此处可以在上传前添加一些校验
                var taskKey = $taskKey.val();
                if (taskKey === "" || taskKey == null) {
                    done("任务班级不为空");
                } else {done();}
            },
            init:function(){
                //添加文件触发
                this.on('addedfile',function(file){

                    console.log("addedfile .....");
                    showLoading()
                });

                this.on('successmultiple',function(files,reponse){
                    $("#dd1").attr("href", `download?fname=${reponse.fn}`)
                    console.log("successmultiple .....");
                    hideLoading()
                    $.each(files,function(index,file){
                        if(file.accepted){
                            // if(reponse[file.name]!='0'){
                            //     //表示后台处理失败
                            //     var $div = $(file.previewElement);
                            //     $div.removeClass("dz-success").addClass("dz-error");
                            //     $div.find(".dz-error-message").find("span").text("上传失败");
                            // }
                        }
                    });
                });
                this.on('removedfile', function(file) {
                    console.info("remove")
                    console.info(file)
                    Dropzone.forElement("#dropz").removeAllFiles(true);
                    $("#dd1").attr("href", "#")
                    //此处可以添加自定义参数
                    // formData.append("taskKey", $taskKey.val());
                });

                this.on("completemultiple", function(file,data) {

                    console.info(data)
                });
                this.on('errormultiple',function(files,reponse){
                    console.log("errormultiple .....");
                    hideLoading()
                    $.each(files,function(index,file){
                        if(file.accepted){
                            if(reponse[file.name]=='0'){
                                //表示后台处理成功
                                var $div = $(file.previewElement);
                                $div.removeClass("dz-error").addClass("dz-success");
                            }
                        }
                    });

                });
            }
        });
        myDropzone.on('sending', function (data, xhr, formData) {
            //向后台发送该文件的参数fo
            formData.append("taskKey", $taskKey.val());
        });

        //在以ajax模式离开此页面时删除dropzone实例
        $(document).one('ajaxloadstart.page', function(e) {
            try {
                myDropzone.destroy();
            } catch(e) {}
        });


    }catch (e) {
        alert('浏览版本过低，不支持文件上传!');
    }

</script>

</html>